<template>
  <view class="content">
    <view class="top">
      <view class="top-inner main-page-box">
        <view class="top-box">
          <view class="menu-title">今日数据</view>
          <view class="top-data">
            <view class="top-data-box">
              <view class="view">今日认领</view>
              <view class="view is-large">2</view>
              <view class="view is-gray">较昨日<text class="text is-green">↓</text></view>
            </view>
            <view class="top-data-box">
              <view class="view">今日办结</view>
              <view class="view is-large">3</view>
              <view class="view is-gray">较昨日<text class="text is-red">↑</text></view>
            </view>
          </view>
        </view>
        <view class="top-box">
          <view class="menu-title">本月工单</view>
          <view class="echart-box">
            <!-- #ifdef H5 -->
            <image style="width: 100%; height: 100%" mode="aspectFit" src="/static/images/echarts.png" />
            <!-- #endif -->
            <!-- #ifndef H5 -->
            <echarts style="width: 100%; height: 100%" ref="chart" canvasId="echarts" :option="option" />
            <!-- #endif -->
          </view>
        </view>
      </view>
    </view>
    <view class="menu-box">
      <view class="menu-title">
        <view>我的代办</view>
        <view class="box-count">{{ list.length }}</view>
      </view>
      <view>
        <view class="menu-item" v-for="(item, i) in list" :key="i" @click="toDetail(item)">
          <view class="menu-row">
            办结情况：<text :class="!item.completionStatus ? 'is-red' : 'is-gray'">{{ item.completionStatus |
              getDictTxt(statusList) }}</text>
          </view>
          <view class="menu-row"> 工单编号：{{ item.number || "--" }} </view>
          <view class="menu-row" v-if="item.billTheme">工单主题：{{ item.billTheme || "--" }} -
            {{ item.billThemeSub || "--" }}
          </view>
          <view class="menu-row" v-else>工单主题：--</view>
          <view class="menu-row">
            客户名称：{{ item.customName || "--" }}
          </view>
          <view class="menu-row">
            联系方式：{{ item.customPhone || "--" }}
          </view>
          <view class="menu-row">
            到期时间：<text class="is-red">{{ item.endTime | getDate }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { baseUrl, getDictTxt, getDate } from "@/static/js/utils.js";
import echarts from "@/components/echarts-uniapp/echarts-uniapp.vue";
import { getDict } from "@/api/system";
import { getList } from "@/api/hotline";
export default {
  components: { echarts },
  data() {
    return {
      baseUrl,
      current: 0,
      list: [],
      statusList: [],
      option: {},
    };
  },
  computed: {},
  filters: { getDictTxt, getDate },
  methods: {
    getDict() {
      getDict({
        data: { keyword: "order_completion_status" },
        callback: ({ data }) => {
          this.statusList = data;
        },
      });
    },
    toDetail(item) {
      uni.navigateTo({
        url: "/pages/myCenter/orderDetail?id=" + item.id,
      });
    },
    toLink({ url }) {
      if (!url) {
        return;
      }
      uni.navigateTo({
        url,
      });
    },
    getEcharts() {
      const empty =
      {
        value: 1,
        name: "",
        itemStyle: {
          color: "#fff",
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
      };
      this.option = {
        legend: {
          top: "2%",
          left: "center",
          data: ["已办结", "待办结"],
        },
        series: [
          {
            name: "name",
            type: "pie",
            radius: ["40%", "60%"],
            center: ["50%", "55%"],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10,
            },
            label: {
              show: true,
              formatter: "{name|{b}}\n{time|{c}}",
              rich: {
                time: {
                  fontSize: 10,
                  color: "#999",
                  padding: [4, 0],
                },
              },
            },
            labelLine: {
              show: true,
              length: 12,
              length2: 4,
              maxSurfaceAngle: 80,
            },
            data: [
              {
                value: 55,
                name: "已办结",
              },
              empty,
              {
                value: 38,
                name: "待办结",
              },
              empty,
            ],
          },
        ],
      };
    },
    getList() {
      getList({
        data: {
          transferStatus: true,
          receivingMan: "马山峰",
          pageNo: 1,
          pageSize: 100,
        },
        callback: ({ data }) => {
          console.log(data);
          this.list = (data?.list || []).filter((v) => !v.completionStatus);
        },
      });
    },
  },
  onLoad() {
    this.getEcharts();
    this.getDict();
  },
  onShow() {
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
